var UploadEnclosureForm = function () {
  var template = /* html */ `
    <div class="upload-enclosure-form" v-loading.fullscreen.lock="loading" :style="{height:elHeight}">
      <template v-if="isShow">
      <div class="upload-content">
        <el-upload drag ref="fileUpload" :action="uploadUrl" :data="uploadData" :show-file-list="false" :before-upload="beforeUpload"
          :on-progress="fileProgress" :on-success="fileUploadSuccess" :on-error="fileUploadError" :disabled="fileUploading">
          <template v-if="!fileUploading">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          </template>
          <template v-else>
            <i class="el-icon-document"></i>
            <div style="width:400px;margin:auto">
              <el-progress :percentage="percentValue" :show-text="false"></el-progress>
            </div>
          </template>
        </el-upload>
      </div>
      <div style="margin-bottom:5px">
        <el-input v-model="queryValue" size="mini" placeholder="请输入搜索条件"></el-input>
      </div>
      <div class="upload-enclosure-table-div">
        <el-table fit stripe border :data="searchFileList" style="width: 100%" height="parent">
          <el-table-column label="id" prop="id" min-width="80px" align="center"></el-table-column>
          <el-table-column label="文件名" prop="fileName" min-width="140px" header-align="center"></el-table-column>
          <el-table-column label="地址" min-width="80px" align="center">
            <template slot-scope="scope">
              <el-button size="mini" @click="loadFile(scope.row)">下载</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      </template>
    </div>
  `;

  return {
    props: {
      data: {
        type: Object,
        required: true
      }
    },

    data: function () {
      var sysOrderNo = this.data.sysOrderNo;
      var basePath = SysUtil.getBasePath();
      return {
        loading: false,
        fileUploading: false,
        isShow: false,
        sysOrderNo: sysOrderNo,
        uploadData: {
          order_no: sysOrderNo,
          type: 2
        },
        uploadUrl: `${basePath}/fileManager/uploadFile`,
        percentValue: 0,
        fileList: [],
        searchFileList: [],
        queryValue: '',
        elHeight: '100%'
      };
    },

    created: function () {
      this.setFileList();
    },

    mounted: function () {
      var self = this;
      $(this.$el).parent().resize(function () {
        self.calHeight();
      });
      this.calHeight();
    },

    methods: {
      calHeight: function () {
        var height = $(this.$el).parent().height();
        height = Math.floor(height - 11);
        this.elHeight = height + 'px';
      },

      setFileList: function () {
        this.loading = true;
        var self = this;
        ajaxRequest('fileManager/getFileList', {
          orderNo: this.sysOrderNo,
          type: 2
        }).then(function (fileList) {
          self.fileList = fileList;
          self.toSearchData();
          self.loading = false;
          self.isShow = true;
        }).catch(function () {
          self.loading = false;
          self.isShow = true;
        });
      },

      toSearchData: function () {
        var queryValue = this.queryValue;
        var fileList = this.fileList;
        if (queryValue !== '') {
          queryValue = queryValue.toLowerCase();
          fileList = _.filter(fileList, function (obj) {
            var fileName = obj.fileName;
            fileName = fileName.toLowerCase();
            return fileName.indexOf(queryValue) !== -1;
          });
        }
        this.searchFileList = fileList;
      },

      beforeUpload: function (file) {
        var size = file.size;
        size = _.round(size / 1024 / 1024, 4);
        if (size > 5) {
          this.$message('文件过大,上传文件不能超过5MB');
          return false;
        }
        this.fileUploading = true;
        this.percentValue = 0;
        return true;
      },

      fileProgress: function (event) {
        var percent = event.percent;
        percent = _.round(percent, 2);
        this.percentValue = percent;
      },

      fileUploadSuccess: function (res) {
        this.fileUploading = false;
        this.percentValue = 0;
        var result = res.result;
        if (!result) {
          this.$alert(res.info, '信息');
        } else {
          this.setFileList();
        }
        this.$refs['fileUpload'].clearFiles();
      },

      fileUploadError: function (err) {
        this.fileUploading = false;
        this.percentValue = 0;
        this.$alert('文件上传失败', '信息');
      },

      loadFile: function (file) {
        window.open(file.url);
      }
    },

    template: template
  };
}();
